<template>
  <el-card class="resume-card">
    <div slot="header" class="card-header">
      <span class="card-title">{{ title }}</span>
      <div class="card-tags">
        <el-tag v-if="isDefault" class="default-tag" size="small">默认简历</el-tag>
        <el-tag v-if="isShared" class="shared-tag" size="small">已分享</el-tag>
      </div>
    </div>
    
    <div class="card-actions">
      <el-button 
        type="primary"
        size="small" 
        class="action-btn edit-btn"
        @click="handleEdit"
      >
        <el-icon><Edit /></el-icon>
        编辑
      </el-button>
      <el-button 
        size="small" 
        class="action-btn view-btn" 
        @click="handleView"
      >
        <el-icon><View /></el-icon>
        查看
      </el-button>
      <el-button 
        v-if="!isShared"
        size="small" 
        class="action-btn share-btn" 
        @click="handleShare"
      >
        <el-icon><Share /></el-icon>
        分享
      </el-button>
      <el-button 
        v-if="isShared"
        size="small" 
        class="action-btn unshare-btn" 
        @click="handleUnshare"
      >
        <el-icon><Close /></el-icon>
        取消分享
      </el-button>
      <el-button 
        size="small" 
        class="action-btn delete-btn" 
        @click="handleDelete"
      >
        <el-icon><Delete /></el-icon>
        删除
      </el-button>
    </div>
  </el-card>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Edit, View, Delete, Share, Close } from '@element-plus/icons-vue'
import axios from 'axios'

const router = useRouter()
const emit = defineEmits(['refresh'])

const props = defineProps({
  resumeId: { type: Number, required: true },
  title: { type: String, required: true },
  date: { type: String, default: '' },
  isDefault: { type: Boolean, default: false },
  isShared: { type: Boolean, default: false },
})

// 编辑简历
const handleEdit = () => {
  console.log('编辑简历，ID:', props.resumeId)
  router.push({
    path: '/editor',
    query: { id: props.resumeId }
  })
}

// 查看简历
const handleView = () => {
  console.log('查看简历，ID:', props.resumeId)
  router.push(`/resume/${props.resumeId}`)
}

// 分享简历
const handleShare = async () => {
  try {
    await ElMessageBox.confirm('确定要分享这份简历吗？分享后其他用户可以看到并使用您的简历模板。', '确认分享', {
      confirmButtonText: '确定分享',
      cancelButtonText: '取消',
      type: 'info'
    })
    
    const response = await axios.post(`http://localhost:7001/api/resumes/${props.resumeId}/share`)
    
    if (response.data.code === 0) {
      ElMessage.success('分享成功')
      emit('refresh') // 触发父组件刷新列表
    } else {
      ElMessage.error(response.data.msg || '分享失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('分享失败:', error)
      ElMessage.error('分享失败，请重试')
    }
  }
}

// 取消分享简历
const handleUnshare = async () => {
  try {
    await ElMessageBox.confirm('确定要取消分享这份简历吗？', '确认取消分享', {
      confirmButtonText: '确定取消',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await axios.post(`http://localhost:7001/api/resumes/${props.resumeId}/unshare`)
    
    if (response.data.code === 0) {
      ElMessage.success('取消分享成功')
      emit('refresh') // 触发父组件刷新列表
    } else {
      ElMessage.error(response.data.msg || '取消分享失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消分享失败:', error)
      ElMessage.error('取消分享失败，请重试')
    }
  }
}

// 删除简历
const handleDelete = async () => {
  try {
    await ElMessageBox.confirm('确定要删除这份简历吗？此操作不可恢复！', '警告', {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await axios.delete(`http://localhost:7001/api/resumes/${props.resumeId}`)
    
    if (response.data.code === 0) {
      ElMessage.success('删除成功')
      emit('refresh') // 触发父组件刷新列表
    } else {
      ElMessage.error(response.data.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败，请重试')
    }
  }
}

</script>

<style scoped>
/* 卡片整体样式 */
.resume-card {
  border-radius: 10px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
  border: none !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.resume-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important; /* 轻微上浮，增加交互感 */
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px !important;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 12px;
}

.default-tag {
  background-color: #e8f3ff !important;
  color: #165dff !important;
  border-color: #c9e0ff !important;
}

/* 卡片操作按钮 */
.card-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 20px 20px;
}

.action-btn {
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.action-btn .el-icon {
  font-size: 16px;
}

.edit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  color: white !important;
}

.edit-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3) !important;
}

.view-btn {
  border-color: #667eea !important;
  color: #667eea !important;
  background: white !important;
}

.view-btn:hover {
  border-color: #667eea !important;
  color: white !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.delete-btn {
  border-color: #f56c6c !important;
  color: #f56c6c !important;
  background: white !important;
}

.delete-btn:hover {
  border-color: #f56c6c !important;
  background-color: #fef0f0 !important;
}

.card-tags {
  display: flex;
  gap: 8px;
}

.shared-tag {
  background-color: #f0f9ff !important;
  color: #1890ff !important;
  border-color: #bae7ff !important;
}

.share-btn {
  border-color: #52c41a !important;
  color: #52c41a !important;
  background: white !important;
}

.share-btn:hover {
  border-color: #52c41a !important;
  color: white !important;
  background: #52c41a !important;
}

.unshare-btn {
  border-color: #faad14 !important;
  color: #faad14 !important;
  background: white !important;
}

.unshare-btn:hover {
  border-color: #faad14 !important;
  color: white !important;
  background: #faad14 !important;
}

</style>